怎么在本地电脑上运行vue项目打包出来的dist文件

已于 2022-08-05 00:18:07 修改
阅读量2.5k 收藏 2
点赞数
分类专栏： visual studio code 浏览器 前端 文章标签： VSCode
于 2022-07-27 15:02:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45215308/article/details/126014845
版权

怎么在本地电脑上运行vue项目打包出来的dist文件

首先在Visual Studio Code中安装live server插件

在这里插入图片描述

然后在 npm run build,打包出我们的dist文件

然后在用Visual Studio Code打开我们的文件夹。而且dist要为根目录

在这里插入图片描述

然后用Open with Live Server，打开我们的index.html文件

在这里插入图片描述

就可以在本地运行我们的dist文件夹了

在这里插入图片描述

zayyo
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
windows环境下运行vue项目编译的dist文件夹
weixin_44092905的博客
12-28 4259
背景 近段时间需要将公司的看板系统部署到产线的服务器上，由于工厂的人员对linux系统的运用程度不高，所以使用windows系统作为运行环境。 目前vue项目编译好的dist文件已经准备好，现需要在windows10系统下将其运行起来。 方式一 npm i -g serve cd dist serve 方式二 配置到nginx里边，一般nginx还可以配置开机自动启动，所以比较推介这种方式: 1、将dist文件拷贝到你想要放置的位置 2、配置nginx的配置文件，设置此服务的端口，以及dist文件的目录路径
在线数据库设计神器：drawDB
最新发布
weixin_42684490的博客
04-15 2369
这是一个免费、简单且直观的在线数据库设计工具和 SQL 生成器。
vscode2022打包资料.zip
04-09
vscode打包可能需要用到的资料！
Vue项目打包编译优化方案
10-14
当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
drawdb:drawio的修改，支持idea+tomcat中编辑运行项目
05-25
DRAWIO的改造 修改不显示弹出框： App.js 3230 App.prototype.showSplash 2.修改默认的语言为zh js/diagramly/Init.js:86 3.修改右上角多语言属性 js/diagramly/Menus.js:905 4.顶部编辑栏的修改 js/mxgraph/Menus.js:34 5.文件菜单的子菜单 js/mxgraph/Menus.js:486 js/diagramly/Menus.js:3276 js/diagramly/Menus.js:2631 6.系统初始化添加$BWK变量保存 js/diagramly/EditorUi.js:9091 7.去掉底部的sheet页 js/diagramly/Pages.js:1154 8.删除未保存的提示 js/diagramly/DrawioFile.js:1413 9.修改新建文件的后缀
vs code文件的打开和运行
兜兜的博客
08-02 2433
vs code文件的打开和运行
vue打包后dist文件在本地启动运行
qq_38902432的博客
04-04 4638
vue项目开发好后，想在本地运行测试最后的打包文件可以通过http-server来启动。最后在浏览器输入：127.0.0.1:9007就可以查看了。
本机启动运行前端提供的dist包
qq_42542312的博客
04-27 2449
在浏览器中访问http://localhost:8080，即可查看前端页面。注意：如果前端页面中有需要与后端进行交互的接口，需要确保后端服务已经启动并且接口地址正确。要在本机启动运行前端提供的dist包，需要先安装一个HTTP服务器，例如Apache或Nginx。这里以使用Node.js的http-server为例进行说明。在浏览器中访问http://localhost:端口号，即可查看前端页面。首先，确保已经安装了Node.js。如果没有安装，可以从。修改文件config.json。
Windows运行vue打包的dist内容
云在青天水在瓶
11-21 3962
方法一 1、 安装http-server   通过npm install -g http-server 进行全局安装 2、进入dist文件夹，cmd运行http-server命令 3、浏览器输入Available on的地址进行访问 如果过程中有错误提示Readable.from is not a function，可以尝试提高node版本（After update node to v13.13.0 (at least v12.3.1), the http-server works well） ..
如何使用VSCode 运行调试插件代码
10-15
主要介绍了如何使用VSCode 运行调试插件代码的相关资料,需要的朋友可以参考下
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
01-22
vue项目中使用npm run build打包后会生成一个dist文件，使用git推送项目后，发现git上少了一个dist文件，为什么明明本地项目中有这个文件而推上去就没有了呢？ 这里会先介绍.gitignore，不想看的 请直接跳过介绍 看解决办法 一、.gitignore 介绍 这里向大家简述一下.gitignore这个文件 一、简绍 我们做的每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。比如我们项目中的npm包(node_modules)，它在我们项目中是很重要的，但是它占的内存也是很大的，所以一般我们用Git管理
【运维】手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】
m0_64210833的博客
06-11 7473
手把手教你如何在Linux/Windows系统上使用Nginx部署多个前端项目，并且教你如何关闭防火墙解决项目访问失败问题。
nginx（windows）发布Vue-cli打包后的dist-局域网
qq_36022290的博客
11-17 868
一：下载nginx 这是我的版本1.15.2链接：https://pan.baidu.com/s/1nP2eN9N_aHW58vJkod59BA 二：更改 打开G:\nginx-1.15.2\conf\nginx.conf修改里面的内容 server { listen       8088;  #要监听的端口号 server_name  192.168.99.45;   #你的IP地址，也...
vuecli打包后的dist目录无法访问_python3 项目打包成exe可执行程序
weixin_39634898的博客
11-14 209
本文主要讲解使用pyinstaller把项目打包exe可执行程序一、安装pyinstaller1、win+R输入cmd，打开命令提示符窗口。(开始-Windows 系统-命令提示符-点击打开窗口)2、输入pyinstaller安装指令：pip install pyinstaller二、打包成exe1、切换命令提示符目录到打包程序目录方法一：切换驱动器指令：驱动器：(如：D：)切换目录指令：cd 打...
如何运行dist文件夹
为啥不能换名字的博客
12-09 1813
npm install express -g npm install express-generator -g express expressDemo （expressDemo是项目名） cd expressDemo npm install npm start //浏览器打开 http://localhost:3000/#/
使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行
夜空孤狼啸的博客
08-09 3161
使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行。vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错，无法运行起来。通常我是放到后端搭建的服务上面去运行，当时前端自己也可以是node，nuxt搭建服务器，写接口等等如果想在本地运行，我们可以借助node.js+express搭建一个服务器，将打包后的文件部署在服务器上，就可以运行起来了。
visual studio python 打包
08-22
要使用Visual Studio打包Python文件，可以使用pyinstaller工具。下面是具体的步骤： 1. 打开Visual Studio，创建一个新的Python项目。 2. 将你想要打包的Python文件复制到项目的根目录下。 3. 在解决方案资源管理器中，右键点击项目名称，选择“NuGet包管理器”>“管理NuGet程序包”。 4. 在NuGet包管理器控制台中，搜索并安装“pyinstaller”包。 5. 打开“启动器.py”文件（如果没有，请创建一个），并在其中添加以下代码： ```python import os import shutil import subprocess def package_with_pyinstaller(): # 设置打包命令 command = 'pyinstaller --onefile your_script.py' # 执行打包命令 subprocess.call(command, shell=True) # 复制其他必需文件（如果有的话） shutil.copytree('path_to_additional_files', 'dist/path_to_additional_files') # 清理临时文件 shutil.rmtree('build') os.remove('your_script.spec') if __name__ == '__main__': package_with_pyinstaller() ``` 6. 将'your_script.py'替换为你要打包的Python文件的名称，并将'path_to_additional_files'替换为需要复制的其他文件夹的路径（如果有的话）。 7. 运行"启动器.py"文件，它将使用pyinstaller将你的Python文件打包成一个.exe可执行文件。 8. 打包完成后，你将在项目目录下的'dist'文件夹中找到生成的可执行文件。 这样，你就可以使用Visual Studio成功打包Python文件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【办公类-18-01】使用VScode编写python程序并打包成.exe文件（打包系列）](https://blog.csdn.net/reasonsummer/article/details/129118938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [巧用visual studio（VC++）解决pyinstaller打包的exe文件过大的问题（一）](https://blog.csdn.net/qingfengjuechen/article/details/102992446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zayyo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值